import React, { Component } from 'react'
import { connect } from "react-redux";
import './Home.less'
import xiaoLang from '../../images/user/xiaolang.png'
import { HomeApi} from '../../request/api'
import books from "../../images/user/books.png";
import examination from "../../images/user/examination.png";
import practice from "../../images/user/practice.png";
import subject from "../../images/user/subject.png";
import LinearProgress from "@material-ui/core/LinearProgress";
 class Home extends Component {
  state = {
    exam: {},
    exemItems: [],
    collect: 0,
    wrong: 0,
    study: 0,
  };
  render() {
    return (
      <div className="home_page">
        <header>
          <h2>{this.state.exam.title}</h2>
          <span>切换考试学科 <i className="iconfont icon-xiangyou"></i></span>
        </header>
        <div className="banner">
          <section>欢迎苏成来叩丁狼学习</section>
          <div className="content" style={{ backgroundImage: `url(${xiaoLang})` }}>
            <div className="right">
              <div className="ti">
                <span>已学{this.state.study}题</span>
                <span>共{this.state.exam.itemCount}题</span>
              </div>
              <div className="bottom">
                <div className="side">
                  <div>{this.state.wrong}</div>
                  <div>错题</div>
                </div>
                <div className="side">
                  <div>{this.state.collect}</div>
                  <div>收藏</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <nav>
          <img src={books} alt="" />
          <img src={examination} alt="" />
          <img src={practice} alt="" />
        </nav>
        <div className="title">
          <h2>学科题库</h2>
          <p>坚持每一天，成长看得见</p>
        </div>
        <ul className="list">
          {this.state.exemItems.map((item) => (
            <li key={item.id}>
              <img src={subject} alt="" />
              <div className="center">
                <div className="center_title">{item.title}</div>
                <div className="center_ti">{item.itemCount}/{item.itemCount}题</div>
                <LinearProgress
                  variant="determinate"
                  value={100}
                />
              </div>
              <div className="btn" onClick={this.goPract.bind(this,item.actionCode)}>练习</div>
            </li>
          ))}
        </ul>
      </div>
    )
  }
  goPract(actionCode){
    this.props.history.push(`/practice/${actionCode}`)
  }
 
  componentDidMount() {
    // 判断到底有没有登录
    let token = localStorage.getItem('x-auth-token')
    if (!token) {
      // 先存储当前html标签的fontSize
      const fz = document.querySelector('html').style.fontSize;
      // 存储到sessionStorage
      sessionStorage.setItem('fz', fz);
      // 如果没有登录先显示loading
      this.props.openLoadingFn();
      // 再两秒后跳转
      setTimeout(() => { this.props.closeLoadingFn(); this.props.history.push('/login') }, 2000)

    } else {

      // 如果已经有token，那么我们就判断此时到底sessionStorage中有没有存储fontSize
      if (sessionStorage.getItem('fz')) {
        document.querySelector('html').style.fontSize = sessionStorage.getItem('fz');

      }
      HomeApi().then((res) => {
        if (res.errCode == 0) {
          let { exam, exemItems, collect, wrong, study } = res.data;
          this.setState({
            exam,
            exemItems,
            collect,
            wrong,
            study,
          });
          console.log(res.data);
        }
      });
    }
  }

}


const mapDispatchToProps = (dispatch) => {
  return {
    openLoadingFn() {
      dispatch({ type: "openLoading" });
    },
    // 关闭loading
    closeLoadingFn() {
      dispatch({ type: "closeLoading" });
    },
  };
};

export default connect(null, mapDispatchToProps)(Home);
